<template>
	<view>
		
		<!-- {{information}} -->
		<view class="box" >
			<image class="top" :src="information.imgs" ></image>
			<view class="bom">
				<view class="tit">
					{{information.name}}
				</view>
				
				<view class="msg">
					{{information.tabs}}
				</view>
				
				
				<view class="pric">
					<view class="left">嘻嘻嘻</view>
					<view class="right">
						哈哈哈哈
					</view>
				</view>
				<view class="det">
					<view class="jg">结构：塔楼</view>
					<view class="dz">地址{{information.range}}</view>
					<view class="hx">户型{{information.type}}</view>
				</view>
				<button class="sub" type="default" @click="phone">免费致电</button>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
import { list } from "../../api/user";
	export default {
		data() {
			return {
				list:{}
			};
		},
		
		computed:{
			...mapState("details",["information"])
		},
		created() {
			// console.log(this.information);
			
		},
		methods:{
			
			phone(){
				// #ifdef MP
				uni.makePhoneCall({
					phoneNumber:"10106188"
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 660rpx;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	.top{
		width: 100%;
		height: 400rpx;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.bom{
		width: 80%;
		margin: 0 auto;
		padding-top: 20rpx;
	.tit{
		font-size: 40rpx;
		font-weight: bolder;
	}
	.msg{
		font-weight: bold;
	}
	.pric{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		.left{
			
		}
		.right{
			
		}
	}
	.det{
		display: flex;
		flex-direction: column;
		
		.dz{
			padding: 20rpx 0;
		}
		.hx{
			padding-bottom: 40rpx;
		}
	}
	.sub{
		margin: 0 auto;
		width: 40%;
		background-color: #4170ee;
		color: #fff;
	}
	}
	
}
</style>
